<!--
 * @Author: 云风 1558003416@qq.com
 * @Date: 2022-05-11 17:14:23
 * @LastEditors: 云风 1558003416@qq.com
 * @LastEditTime: 2022-05-11 17:23:53
 * @FilePath: \vue3_admin_jinxu\src\views\global\global.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="margin-top: 35px">
    <el-button size="small" @click="toggle"> Switch Lang </el-button>
    <br />
    <el-config-provider :locale="locale2">
      <div>{{ locale1.el.colorpicker.confirm }}</div>
      <div>{{ locale1.el.colorpicker.clear }}</div>
    </el-config-provider>
  </div>
</template>

<script setup>
import { ref } from "vue";

const locale1 = ref({
  name: "zh-cn",
  el: {
    colorpicker: {
      confirm: "确定",
      clear: "清空",
    },
  },
});
const locale2 = ref({
  name: "en",
  el: {
    colorpicker: {
      confirm: "Confirm",
      clear: "Clear",
    },
  },
});
const toggle = () => {
  const temp = locale1.value;
  locale1.value = locale2.value;
  locale2.value = temp;
};
</script>
